<template>
	<router-link to="./" class="list-vio">
		<div class="vio-img">
			<img src="../assets/tv.png" class="tv"/>
			<img v-lazy="record.pic" :alt="record.title"/>
			<div class="vio-hot clearfix">
				<div class="hot-num">
					<svg><use xlink:href="#icon-bofangshu"></use></svg>
					<span class="hot-text">
						{{record.play}}
					</span>
					
				</div>
				<div class="hot-num">
					<svg><use xlink:href="#icon-danmushu"></use></svg>
					<span class="hot-text">
						{{record.video_review}}
					</span>
				</div>
			</div>
		</div>
		<div class="vio-text">
			<p>{{record.title}}</p>
		</div>
	</router-link>
</template>

<script>
//	import '../js/rem'
	
	 export default {
	 	props:['record'],
	 	mounted() {
	 		this.son();
		},
	 	methods:{
			son(){
				this.record.play=this.record.play>=10000?(this.record.play/10000).toFixed(1)+"万":this.record.play;
				this.record.video_review=this.record.video_review>=10000?(this.record.video_review/10000).toFixed(1)+"万":this.record.video_review;
			}
		},
	 }
</script>

<style lang="scss">
	/*$font-size:64px;
	@function r($px){
	    @return $px/$font-size*1rem;
	}
	html{
	    font-size: $font-size;
	    line-height: 0;
	}*/
	.list-vio{
		display:block;
		width: 50%;
		float: left;
		padding: 0 2%;
		margin-bottom: 10px;
		.vio-img{
			width: 100%;
			overflow: hidden;
			border-radius:6px;
			height: r(180px);
			position: relative;
			background-color: #e7e7e7;
			.tv{
				position: initial;
				margin: 0 20%;
				width: 60%;
			}
			img{
				top: 0;
				position: absolute;
				width: 100%;
				vertical-align: middle;
			}
		}
		.vio-hot{
			position: absolute;
		    left: 0;
		    width: 100%;
		    bottom: 0;
		    height: 15px;
		    background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
			.hot-num{
				float: left;
				line-height: 0;
				width: 50%;
				padding-left: 6px;
				svg{
					width: 16px;
					height: 14px;
				    fill: #fff;
				    vertical-align:middle;
				}
				.hot-text{
					color: #fff;
					font-size: 10px;
					vertical-align: middle;
				}
			}
		}
		.vio-text{
			margin-top: 2px;
			font-size: 10px;
			overflow: hidden;
			height: 30px;
			color: #212121;
			line-height: initial;
		}
	}
</style>